<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付中心-思多客</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/public/css/m/public.css">
    <link rel="stylesheet" href="/public/css/m/payment.css">
</head>

<body>
    <div class="n-page">
        <div class="new-header flex">
            <div class="back-box">
                <img src="/public/images/m/back.png" alt="" class="left-back-icon">
            </div>
            <span class="header-title flex-child-box">选择支付</span>
        </div>
        <div class="content" id="payContent">
            <div class="reward-form-box1">
                <div class="flex m-user-info" id="J_userInfo"></div>
                <div class="flex m-report">
                    <div id="J_report"></div>
                    <div class="cell-center-box flex-1">
                        <div class="cell-center" id="J_money"></div>
                    </div>
                    <div class="pay-type flex-2" id="J_payment">
                        <h3 class="pay-type-title">支付方式：</h3>
                        <ul class="pay-type-box">
                            <li class="payment payment-cash" data-type="cash">赏币支付</li>
                            <li class="payment payment-type payment-wx" data-type="wx"></li>
                            <li class="payment payment-type payment-alipay" data-type="alipay"></li>
                            <!-- <li class="payment payment-type payment-union"></li> -->
                        </ul>
                    </div>
                </div>
                <div id="payBtnContent"></div>
            </div>
            <div class="qrcode-box">
                <img src="/public/images/m/qrcode.jpg" alt="">
                <p>微信扫码直付<br>客服报告直传</p>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/public/js/m/fontResize.js"></script>
<script src="/public/lib/layer/layui.js"></script>
<script src="/public/js/G.js"></script>
<script src="/public/js/user.js"></script>
<script src="/public/js/reward.js"></script>
<script src="/public/js/rechargeApi.js"></script>
<script src="/public/js/rechargeOrder.js"></script>
<script src="/public/js/productOrder.js"></script>
<script src="/public/js/product.js"></script>
<script src="/public/js/m/public.js"></script>

<script id="J_money_tpl" type="text/html">
    <p class="center">
        <span class="color-red">{{d}}</span>赏币<br>或<br><span class="color-red">{{d}}</span>元
    </p>
</script>
<script id="J_pay_tpl" type="text/html">
   {{# console.log(d)}}
    {{# if(d.isVip){ }}
        <a href="javascript:;" class="pay-btn down-free" id="vipDownload" data-id="{{d.productId}}">VIP下载</a>
    {{# }else{ }}
        <a href="javascript:;" class="pay-btn" id="payBtn">立即支付</a>
    {{# }; }}
</script>
<script id="J_userInfo_tpl" type="text/html">
    <div class="user-header-box flex-1">
        <img src="/{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{d.userId}}.png" alt="">
    </div>
    <div class="username-box-show"><b>用户名:</b>{{d.username}}</div>
    <div class="remain-all-box flex-2">
        <div class="remain-box">
            <p class="remain-little">剩余赏币：<span class="red">{{d.balance}}</span></p>
            <a href="/m/chargeMoney.html"><div class="follow">充值</div></a>
        </div>
    </div>
</script>
<script id="J_report_tpl" type="text/html">
    {{# if(d.type == 'reward'){ }}
    <div class="zp-box flex-1">
        <h4 style="font-size: 0.48rem;font-weight: bold;margin: 0.266rem 0;">{{formatRewardType(d.reward.type)}}</h4>
        <p style="line-height: 1.5;font-size: 0.32rem;line-height: 1.5;">{{d.reward.title}}</p>
    </div>
    {{# }else{ }}
    <div class="zp-box flex-1">
        <h4 class="zp-bh">{{d.product.title}}</h4>
        <div class="m-report-info">
            <img src="/{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{d.product.userId}}.png" alt="">
            <p class="center report-t-name">{{d.product.tName}}</p>
            <div class="report-outline">
                <p class="center">研究板块</p>
                <p>{{d.product.outline}}</p>
            </div>
        </div>
    </div>
    {{# }; }}
</script>
<script>
layui.use('laytpl', function() {
    var laytpl = layui.laytpl;

    var money = G.getQuery('money');
    var productId = G.getQuery('productId');
    var userId = G.getCookie('sdk_user_id');

    var productType = G.getQuery('productType').slice(0,1);

    //微信浏览器隐藏支付宝
    if(isWxBrowser()){
        $('.payment-alipay').hide()
    }
    //用户信息
    loading.open()
    user.getInfo({}, function(user) {
        console.log(user)
        if(user.balance < money){
            $('.payment-cash').hide()
        }
        laytpl($('#J_userInfo_tpl').html()).render(user, function(html) {
            $('#J_userInfo').html(html)
        })
        var isVip;
        console.log(productType)
        switch(productType){
            case 'A':
                if(user.vipDayA > 0){
                    isVip = true;
                }
                break;
            case 'B':
                if(user.vipDayB > 0){
                    isVip = true;
                }
                break;
            default:
                isVip = false;
        }
        if(isVip){
            $('#J_payment').hide()
        }
        laytpl($('#J_pay_tpl').html()).render({isVip: isVip,productId: productId}, function(html) {
            $('#payBtnContent').html(html)
        })

        loading.close()
    },function(err){
        loading.close()
        // alert(err)
        console.log(err)
    })

    var type = G.getQuery('type');

    var callbackString;
    if(type == 'reward'){
        callbackString = 'payment.html&money='+money+'&type=reward&rewardType='+G.getQuery('rewardType')+'&title=' + decodeURI(G.getQuery('title')) + '&content=' + decodeURI(G.getQuery('content'))
    }else{
        callbackString = 'payment.html&money='+money+'&type=product&title='+G.getQuery('title')+'&userId='+G.getQuery('userId')+'&tName='+decodeURI(G.getQuery('tName'))+'&outline='+decodeURI(G.getQuery('outline'))
    }
    isLogined(callbackString)


 
    var params = {
        type: G.getQuery('type'),
        reward: {
            type: G.getQuery('rewardType'),
            title: decodeURI(G.getQuery('title'))
        },
        product: {
            title: G.getQuery('title'),
            userId: G.getQuery('userId'),
            tName: decodeURI(G.getQuery('tName')),
            outline: decodeURI(G.getQuery('outline'))
        }
    }

    //金额
    laytpl($('#J_money_tpl').html()).render(money, function(html) {
        $('#J_money').html(html)
    })
    
    laytpl($('#J_report_tpl').html()).render(params, function(html) {
        $('#J_report').html(html)
    })
    lazyload()
});
//格式化悬赏类型
function formatRewardType(type) {
    switch (type) {
        case 'A':
            return '个股诊断';
        case 'B':
            return '解套策略';
        case 'C':
            return '季度策略';
        case 'D':
            return '年度策略';
    }
}

$(document).on('click','.payment',function(){
    $(this).siblings('.current-payment').removeClass('current-payment');
    $(this).addClass('current-payment')
})
$(document).on('click','#payBtn',function(e){
    if(!$('.current-payment').length){
        alert('请选择支付方式')
        return;
    }
    var paymentType = $('.current-payment').data('type');
    var productId = G.getQuery('productId');
    var money = G.getQuery('money');
    var type = G.getQuery('type');
    
    if(type == 'reward'){
        var rewardObject = {
            type: G.getQuery('rewardType'),
            title: decodeURI(G.getQuery('title')),
            content: decodeURI(G.getQuery('content'))
        }
        switch(paymentType){
            case 'cash':
                reward.add(JSON.stringify(rewardObject),function(){
                    alert('发布成功！')
                    location.href = '/m/reward.html';
                },function(err){
                    console.log(err)
                    alert(err)
                })
                return;
            case 'wx':
            //微信浏览器提示浏览器打开
                var orderId = -1;
                rechargeApi.create(money,{},function(data) {
                    orderId = data.rechargeOrderId;
                    if(isWxBrowser()) {
                        rechargeOrder.createOrder('wx','wxInnerH5',orderId,function(res){
                            console.log(res)
                            wxApppay(res, function(){
                                reward.add(JSON.stringify(rewardObject),function(){
                                    alert('发布成功！')
                                    location.href = '/m/reward.html';
                                },function(err){
                                    console.log(err)
                                    alert(err)
                                })
                            })
                        },function(e){
                            alert(e)
                            console.log(e)
                        },{
                            'OPEN-ID': sessionStorage.getItem('openid')
                        })
                    }else{
                        rechargeOrder.createOrder('wx','wap',orderId,function(res){
                            console.log(res)
                            location.href = res.mwebUrl;
                            //调用微信的同时弹窗询问是否支付完成，支付完成然后添加
                            payDialog(function(){
                                reward.add(JSON.stringify(rewardObject),function(){
                                    alert('发布成功！')
                                    location.href = '/m/reward.html';
                                },function(err){
                                    console.log(err)
                                    alert(err)
                                    $('#J_wx_tpl').remove()
                                })
                            })
                        },function(e){
                            alert(e)
                            console.log(e)
                        })
                    }
                })
            break;
            case 'alipay':
                // var pay = window.open();
                rechargeApi.create(money,{},function(data) {
                    orderId = data.rechargeOrderId;
                    var url = rechargeOrder.getUrl('alipay',orderId,'wap');
                    location.href = url;
                    payDialog(function(){
                        rechargeOrder.getStatus(orderId,'alipay',{},function(){
                            reward.add(JSON.stringify(rewardObject),function(reward){
                                // setTimeout(function(){
                                    alert('支付成功')
                                    location.reload();
                                    $('#J_wx_tpl').remove()
                                // },1500)
                            },function(err){
                                console.log(err)
                                $('#J_wx_tpl').remove()
                            })
                        },function(){
                            alert('支付失败')
                            $('#J_wx_tpl').remove()
                        })
                    })
                })
                return;
        }
    }else{
        var productId = G.getQuery('productId');
        var params = {
            productId: productId,
            balancePay: money
        }
        switch(paymentType){
            case 'cash':
                productOrder.add(productId,params,function(data){
                    console.log(data)
                    product.findOne(data.productId,{},function(product){
                        console.log(product)
                        if(product.payed){
                            if(isWxBrowser()){
                                alert('支付成功，请在非微信浏览器中进行下载!');
                                location.href = '/m/index.html';
                            }else{
                                var a = $('<a href="'+G.apiurl + 'api/product/'+productId+'/download?token='+G.getCookie('jwt')+'"></a>');
                                a[0].click()
                            }
                        }
                    })
                })
                break;
            case 'wx':
                //微信浏览器提示浏览器打开
                var orderId = -1;
                rechargeApi.create(money,{},function(data) {
                    orderId = data.rechargeOrderId;
                    if(isWxBrowser()) {
                        rechargeOrder.createOrder('wx','wxInnerH5',orderId,function(res){
                            console.log(res)
                            wxApppay(res)
                            location.reload()
                        },function(e){
                            alert(e)
                            console.log(e)
                        },{
                            'OPEN-ID': sessionStorage.getItem('openid')
                        })
                    }else{
                        rechargeOrder.createOrder('wx','wap',orderId,function(res){
                            console.log(res)
                            location.href = res.mwebUrl;
                            //调用微信的同时弹窗询问是否支付完成，支付完成然后添加
                            payDialog(function(){
                                rechargeOrder.getStatus(orderId,'alipay',{},function(order){
                                    productOrder.add(productId,params,function(data){
                                        console.log(data)
                                        product.findOne(data.productId,{},function(product){
                                            console.log(product)
                                            if(product.payed){
                                                var a = $('<a href="" download="download"></a>');
                                                a.attr('href',G.apiurl + 'api/product/'+productId+'/download?token='+G.getCookie('jwt'));
                                                a[0].click()
                                            }
                                            $('#J_wx_tpl').remove()
                                        })
                                    })
                                },function(e){
                                    alert('支付失败')
                                    $('#J_wx_tpl').remove()
                                })
                                
                            })
                        },function(e){
                            alert(e)
                            console.log(e)
                        })
                    }
                })
                break;
            case 'alipay':
                // var pay = window.open();
                rechargeApi.create(money,{},function(data) {
                    orderId = data.rechargeOrderId;
                    var url = rechargeOrder.getUrl('alipay',orderId,'wap');
                    location.href = url;
                    payDialog(function(){
                        rechargeOrder.getStatus(orderId,'alipay',{},function(order){
                            productOrder.add(productId,params,function(data){
                                console.log(data)
                                product.findOne(data.productId,{},function(product){
                                    console.log(product)
                                    if(product.payed){
                                        var a = $('<a href="" download="download"></a>');
                                        a.attr('href',G.apiurl + 'api/product/'+productId+'/download?token='+G.getCookie('jwt'));
                                        a[0].click()
                                    }
                                    $('#J_wx_tpl').remove()
                                })
                            })
                        },function(e){
                            alert('支付失败')
                            $('#J_wx_tpl').remove()
                        })
                    })
                });
                break;
        }
        
    }
})

function payDialog(callback){
    var str = '<div class="wx-pay" id="J_wx_tpl">\
        <div id="qrContent">\
            <div class="close" id="shadowClose" style="width:0.5rem;height:0.5rem;position:absolute;top:-0.5rem;right:-0.5rem;background-color:#fff;border-radius:50%;font-size:0.5rem;text-align:center;line-height:0.5rem;">x</div>\
            <div class="qrcode" id="qrcode">\
            <h3 style="font-size:0.5rem;margin:0.8rem 0;">支付是否完成？</h3>\
            <input style="border:none;padding:0.1rem 0.2rem;margin:0 0.1rem;font-size:0.48rem;" type="button" value="完成" id="J_success">\
            <input style="border:none;padding:0.1rem 0.2rem;margin:0 0.1rem;font-size:0.48rem;" type="button" value="未完成" id="J_fail">\
            </div>\
        </div>\
    </div>';
    $('body').append(str);
    $('#J_wx_tpl').css({
        width: $(document).width(),
        height: $(document).height(),
        backgroundColor: 'rgba(0,0,0,.5)',
        position: 'fixed',
        top: '0',
        left: '0',
        zIndex: '999'
    })
    $('#qrContent').css({
        width: $(document).width() / 2,
        height: 'auto',
        padding: '0.5rem 0',
        backgroundColor: '#fff',
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: - $(document).height() / 4,
        marginLeft: '-25%',
        zIndex: '9999',
        textAlign: 'center'
    })
    document.getElementById('J_success').addEventListener('click', function() {
        callback()
    }, false);
}

$(document).on('click','#shadowClose',function(){
    $('#J_wx_tpl').remove()
})
$(document).on('click','#J_fail',function(){
    $('#J_wx_tpl').remove()
})
$(document).on('click', '#vipDownload',function(){

})

</script>

</html>